import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Icon,Tabs,message,Row, Col,Input,DatePicker,Button,Table,Form,Select,Cascader,Upload,Radio,Spi,Modal,Spin} from 'antd';
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
import api from '../api';
import moment from 'moment';
import {bind_change, bind_toggle} from '../common/State';


const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
import {
} from '../constants/index';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};

class AccountManageEdit extends React.Component {

  


    constructor(props, context){
        super(props, context);
        var {loan_id,operate_type} = props.location.query||{};
        this.state={
          loading:false,
          accuont:{},
          resetPasswordModalVisible:false,
        };
    }
    componentWillMount(){
      let {id} = this.props.location.query||{};
      if (id) {
        this.getAccountById(id);
      }
    }

    componentWillReceiveProps(nextProps){

    }

    async getAccountById(id){
      this.setState({loading:true});

      let result = await api('/system/accountManage/detail',{id});

      if (result.success) {
        this.setState({
          account:result.data
        })
      }else{

      }
      this.setState({loading:false})
    }


    //保存
    save(){
      const {validateFieldsAndScroll} = this.props.form;
      validateFieldsAndScroll((errors,values) =>{
        if (errors) {
          return;
        }

        let {account,loading} = this.state;
        account  = {...account,...values};

        let {id} = this.props.location.query||{};
        if (id) {
          account.id = id;
          this.updateAccount(account);
        }else{
          this.submit(account);
        }
        
      })
    }

    //提交
    async submit(account){
      this.setState({loading:true});
      let result = await api('/system/accountManage/add',{account});
      this.setState({
          loading:false,
        })
      if (result.success) {
        message.success("保存成功");
        this.context.router.push('/systemManage/accountManage/list');
      }else{
        message.error(result.message);
      }
    }

    async onSubmitResetPasswordConfirm(){
      let {id} = this.props.location.query||{};
      let {newPassword} = this.state;
      let result = await api('/system/accountManage/resetPassword',{id:id,password:newPassword});
      this.setState({
        resetPasswordModalVisible:false,
      })
      if (result.success) {
        message.success("修改成功");
      }else{
        message.error(result.message);
      }

    }


    async updateAccount(account){
      this.setState({loading:true});

      let result = await api('/system/accountManage/update',{account});
      this.setState({
          loading:false,
        })
      if (result.success) {
        message.success("保存成功");
        this.context.router.push('/systemManage/accountManage/list');
      }else{
        message.error(result.message);
      }
    }


    //编辑情况下是否停用账号
    onChangeState(e){

    }



    //手机区号
    getPrePhone(){
      let {getFieldDecorator} = this.props.form;
      let {account} = this.state 
      return (
        <div>
          {getFieldDecorator('area_code', {
            rules: [
              {
                required: true,
                message: '请输入姓名',
              },
            ],
            initialValue:account&&account.area_code?account.area_code:"86",
          })(
            <Select value="86" style={{ width: 70 }}>
              <Option value="86">+86</Option>
              <Option value="87">+87</Option>
            </Select>
          )}
        </div>
        )
    }
    
    render() {
      const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        var {account} = this.state;
        let {id} = this.props.location.query||{};
       return (
          <Spin spinning={this.state.loading}>
          <div className="containerWithBorder margin20 bgWhite">
            <div className="margin15">{id?"编辑账户信息":"添加账户"}</div>
            <div className="padding15 containerWithTopAndBottomBorder" style={{backgroundColor:"#EFEFEF"}}>
              {
                id?
                  null
                :
                  <Button
                    type="primary"
                    className="marginR15"
                  >保存并继续添加</Button>
              }
              <Button
                type="primary"
                className="marginR15"
                onClick={this.save.bind(this)}
              >保存</Button>
              <Button
                type="primary"
                className="marginR15"
              >取消</Button>
            </div>
            <Form className="type-body marginT20 marginL15">
              <Row>
                <Col span={12}>
                    <FormItem 
                      {...formItemLayout}
                      label="姓名"
                    >
                      {getFieldDecorator('username', {
                        rules: [
                          {
                            required: true,
                            message: '请输入姓名',
                          },
                        ],
                        initialValue:account&&account.username?account.username:"",
                      })(
                        <Input 
                          placeholder="请输入姓名" 

                        />
                      )}
                      
                    </FormItem>
                </Col>

              </Row>
              <Row>
                <Col span={12}>
                  {
                    id?
                      <FormItem 
                        {...formItemLayout}
                        label="账号"
                      >
                        <div>111</div>  
                      </FormItem>
                    :
                      <FormItem 
                        {...formItemLayout}
                        label="账号"
                      >
                        {getFieldDecorator('account', {
                          rules: [
                            {
                              required: true,
                              message: '请输入账号',
                            },
                          ],
                        initialValue:account&&account.account?account.account:"",
                        })(
                          
                          <Input placeholder="请输入账号"/>
                        )}
                          
                      </FormItem>
                  }
                </Col>
              </Row>
              {
                id?
                  <Row>
                    <Col span={12}>
                      <FormItem 
                        {...formItemLayout}
                        label="密码"
                      >
                        <Button 
                          type="primary"
                          onClick={() => {
                            this.setState({
                              resetPasswordModalVisible:true,
                            })
                          }}
                        >
                        重置密码
                        </Button>
                      </FormItem>
                    </Col>
                  </Row>
                :
                  null
              }
              <Row>
                <Col span={12}>
                  <FormItem 
                    {...formItemLayout}
                    label="公司"
                  >
                    {getFieldDecorator('firm', {
                      rules: [
                        {
                          required: true,
                          message: '请输入公司',
                        },
                      ],
                        initialValue:account&&account.firm?account.firm:"",
                    })(
                      <Input 
                        placeholder="请输入公司" 
                      />
                    )}
                      
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <FormItem 
                    {...formItemLayout}
                    label="职务"
                  >
                    {getFieldDecorator('apartment', {
                      rules: [
                        {
                          required: true,
                          message: '请输入职务',
                        },
                      ],
                        initialValue:account&&account.apartment?account.apartment:"",
                    })(
                      <Input 
                        placeholder="请输入职务" 
                      />
                    )}
                      
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <FormItem 
                    {...formItemLayout}
                    label="手机"
                  >
                    {getFieldDecorator('cellphone', {
                      rules: [
                        {
                          required: true,
                          message: '请输入手机号',
                        },
                      ],
                        initialValue:account&&account.cellphone?account.cellphone:"",
                    })(
                      <Input 
                        addonBefore={this.getPrePhone()}
                        placeholder="请输入手机号" 
                      />
                    )}
                      
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <FormItem 
                    {...formItemLayout}
                    label="权限"
                  >{getFieldDecorator('role_type',{
                    rules:[
                      {
                        required:true,
                        message:'请选择权限',
                      }
                    ],
                    initialValue:account&&account.role_type?account.role_type:"",
                  })
                  (
                    <Select 
                      placeholder="请选择权限" 
                    > 
                      <Option key="0" value="">请选择</Option>
                      <Option key="1" value="ORIGINATOR">原始权益人</Option>
                      <Option key="2" value="PLAN_ADMIN">计划管理人</Option>
                    </Select>
                  )} 
                  </FormItem>
                </Col>
              </Row>
              {
                id?
                <Row>
                  <Col span={12}>
                    <FormItem 
                      {...formItemLayout}
                      label="权限"
                    >
                      {getFieldDecorator('active', {
                        rules: [
                          {
                            required: true,
                            message: '请选择权限',
                          },
                        ],
                    initialValue:account&&account.active?account.active:"",
                      })(
                        <RadioGroup onChange={this.onChangeState.bind(this)}>
                          <RadioButton value={true}>正常</RadioButton>
                          <RadioButton value={false}>停用</RadioButton>
                        </RadioGroup>
                      )}
                        
                    </FormItem>
                  </Col>
                </Row>
                :
                null
              }


            </Form>
            <Modal
                title="重置密码"
                visible={this.state.resetPasswordModalVisible}
                onOk={this.onSubmitResetPasswordConfirm.bind(this)}
                onCancel={() => {
                  this.setState({
                    resetPasswordModalVisible:false,
                  })
                }}
              > 
                <Row span={16}>
                  <Col span={2} className="marginT5">新密码</Col>
                  <Col span={14}>
                    <Input
                      placeholder="请输入新密码"
                      {...this::bind_change('newPassword')}
                      type="password"
                    ></Input>
                  </Col>
                </Row>
                <p className="marginT10">重置后请告知员工，确保其正常登录</p>
              </Modal>
            


          </div>

          </Spin>

          
            
        )
    }
}
AccountManageEdit.contextTypes= { router: React.PropTypes.object.isRequired};

export default  Form.create()(AccountManageEdit);
